<template>
	<div class="orders">
		<div class="orders_nav">
			<!-- 导航栏 -->
			<div class="orders_option1">
				<!-- 付款以及账号 -->
				<div>
					<select v-model="order.payStaus">
						<option>请选择</option>
						<option value="0">未付款</option>
						<option value="1">已付款</option>
					</select>
				</div>
				<div>
					<input placeholder="下单人-账号" v-model="order.account" />
				</div>
			</div>
			<div class="orders_option2">
				<div><select v-model="order.shipStatus">
						<option>请选择</option>
						<option value="0">未发货</option>
						<option value="1">已发货</option>
						<option value="2">已签收</option>
					</select></div>
				<div><input placeholder="下单人-手机号" v-model="order.phone" /> </div>
			</div>
			<div class="orders_option3">
				<div><select v-model="order.days">
						<option>请选择</option>
						<option value="7">7天内</option>
						<option value="15">15天内</option>
						<option value="30">30天内</option>
						<option value="60">60天内</option>
						<option value="120">120天内</option>
					</select> </div>
				<div><input placeholder="下单人-姓名" v-model="order.nickname" /> </div>
			</div>
			<div class="but">
				<el-button type="primary" icon="el-icon-search" @click="findAllOrd">搜索</el-button>
			</div>
		</div>

		<div class="orders_tab">
			<!-- 数据 -->
			<el-table :data="tableData" style="width: 100%">
				<el-table-column type="expand">
					<template slot-scope="props">

						<table style="margin-left: 10%; margin-right: 10%; width: 60%;">
													<tr>
														<td>&nbsp;</td>
														<td><b>账号:&nbsp;</b>{{props.row.user.account}}</td>
														<td><b>电话:&nbsp;</b>{{props.row.user.phone}}</td>
														<td><b>下单:</b>{{props.row.user.nickname}}</td>
														<td>&nbsp;&nbsp;&nbsp;</td>
														<td>
															<span v-show="props.row.shipStatus>=1">
																<b>{{props.row.shipper}}</b>
															</span>
														</td>
													</tr>
													<tr v-for="n in props.row.items">
														<td>
															<div style="width: 3vw; height:3vw;">
																<img :src="`http://127.0.0.1/api/public/showimg/${n.book.pic}`"
																	style="display: block; width: 100%; height: 100%;" />
															</div>
														</td>
														<td><b>名称:</b>{{n.book.name}}</td>
														<td><b>数量:</b>{{n.num}}</td>
														<td><b>单价:</b>{{n.price}}</td>
														<td><b>库存:</b>{{n.book.stock}}</td>
													</tr>
												</table>

					</template>
				</el-table-column>
				<el-table-column label="订单号" prop="ordid">
				</el-table-column>
				<el-table-column label="收货人" prop="ship2name">
				</el-table-column>
				<el-table-column label="收获地址" prop="ship2addr">
				</el-table-column>
				<el-table-column label="电话" prop="ship2phone">
				</el-table-column>
				<el-table-column label="发货单号" prop="shipno">
				</el-table-column>
				<el-table-column label="下单时间" prop="tship">
				</el-table-column>
				<el-table-column label="总价" prop="amount">
				</el-table-column>
				<el-table-column label="付款" prop="payStatus">
				</el-table-column>
				<el-table-column label="收获" prop="shipStatus">
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'Orders',
		data() {
			return {
				order: {
					days: '',
					payStaus: '',
					shipStatus: '',
					phone: '',
					account: '',
					nickname: ''
				},
				tableData: []
			}
		},
		methods: {
			findAllOrd() {
				console.log(this.order)
				this.$postj("/api/fore/ord/findPageOrders/1/6",120).then((resp) => {
					console.log(resp.data)
					this.tableData = resp.data.data.orders
					this.tableData.forEach((item) => {
						if (item.payStatus == 0) {
							item.payStatus = "未付款"
						} else {
							item.payStatus = "已付款"
						}
						if (item.shipStatus == 0) {
							item.shipStatus = "未发货"
						}
						if (item.shipStatus == 1) {
							item.shipStatus = "已发货"
						}
						if (item.shipStatus == 2) {
							item.shipStatus = "已签收"
						}
					})
					console.log(this.tableData)
				})
			}
		},
		mounted() {}
	}
</script>

<style>
	.kkk {
		border: #008000 solid;
		width: 100%;
	}

	.kkk div {

		margin-left: 40%;
	}

	.kkk img {
		width: 100px;
	}

	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}

	.orders {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	select {
		border: #DCDCDC solid 1px;
		border-radius: 5px;
		font-size: 20px;
		width: 100%;
	}

	input {
		border: #DCDCDC solid 1px;
		border-radius: 5px;
		width: 100%;
		font-size: 20px;
	}

	.orders_nav {
		display: flex;
	}

	.orders_option2 {
		margin-left: 10%;
	}

	.orders_option3 {
		margin-left: 10%;
	}

	.but {
		margin-left: 10%;
	}
</style>
